<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import SlideVerify from '@/components/slide-verify.vue'
import { setRoutesByRole } from '@/router/routerHelper'
import { type IpasswordLoginVo, useGetUserInfo, usePasswordLogin } from '@fl/api/man-api'
import { SubmitBtn } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { useAesEncrypt } from '@fl/hooks/web/useCrypt'
import { ElForm, ElFormItem } from 'element-plus'

const { createMessage } = useMessage()
const verifyRef = ref()

type IForm = Pick<IpasswordLoginVo, 'mobile' | 'password'>

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<IForm>({
    mobile: '',
    password: '',
})

const rules = reactive<FormRules<IForm>>({
    mobile: [
        {
            message: '请输入用户名',
            required: true,
        },
    ],
    password: [
        {
            message: '请输入密码',
            required: true,
        },
    ],
})

const isVerify = ref(false)

const { isPending: isPendingLogin, mutateAsync } = usePasswordLogin()
const { isLoading: isLoadingUserInfo, refetch: refetchUserInfo } = useGetUserInfo(false)

const isPending = computed(() => isPendingLogin.value || isLoadingUserInfo.value) // 是否正常

async function submitForm(formEl: FormInstance | undefined) {
    if (!formEl)
        return

    const isValid = await formEl.validate()
    if (isValid) {
        // 如果已经是真实的人类, 允许提交表单
        if (verifyRef.value.isHuman)
            await verifySuccess()
        else
            isVerify.value = true
    }
}

async function verifySuccess() {
    const result = await mutateAsync({ ...ruleForm, password: await useAesEncrypt(ruleForm.password) })
    if (result) {
        createMessage.success('登录成功')

        await refetchUserInfo()
        await setRoutesByRole({ isAdmin: true })
        // await setRoutesByRoleByFrontend()
    }
}
</script>

<template>
    <ElForm ref="ruleFormRef"
            label-position="top"
            :model="ruleForm"
            :rules="rules"
            @submit.prevent
    >
        <div class="flex flex-col gap-12">
            <ElFormItem label="用户名"
                        prop="mobile"
            >
                <el-input v-model.trim="ruleForm.mobile"
                          placeholder="请输入用户名"
                          size="large"
                          maxlength="20"
                />
            </ElFormItem>
        </div>

        <div class="flex flex-col gap-12">
            <ElFormItem label="密码"
                        prop="password"
            >
                <el-input v-model.trim="ruleForm.password"
                          type="password"
                          show-password
                          placeholder="请输入密码"
                          size="large"
                          maxlength="20"
                />
            </ElFormItem>
        </div>

        <SubmitBtn type="primary"
                   native-type="submit"
                   class="btn rounded-3 text-#fff lh-48 text-center w-full cursor-pointer"
                   size="large"
                   :loading="isPending"
                   @click="submitForm(ruleFormRef)"
        >
            登录
        </SubmitBtn>
    </ElForm>

    <SlideVerify ref="verifyRef"
                 v-model:visible="isVerify"
                 @success="verifySuccess"
    />
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}
.btn {
    margin-top: toVh(30);
}
</style>
